<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/common/taglib.jsp" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<title> 한국의 논매기 소리 </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link href="/css/reset.css" type="text/css" rel="stylesheet" />
<link href="/css/common.css" type="text/css" rel="stylesheet" />
<link href="/css/layout.css" type="text/css" rel="stylesheet" />
<link href="/css/ui.css" type="text/css" rel="stylesheet" />
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<!--script src="/js/gnb.min.js" type="text/javascript"></script-->
<script src="/js/gnb_ui.js" type="text/javascript"></script>
<script src="/js/left_menu.js" type="text/javascript"></script>
<script src="/js/ui.js" type="text/javascript"></script>
<validator:javascript formName="itemVO" staticJavascript="false" xhtml="true" cdata="false" />
<script type="text/javascript" src="<c:url value="/validator.do"/>"></script>
<script type="text/javascript">
//상세폼
function fncSave(){
	var form = document.itemVO;
	
	if (validateItemVO(form)) {
		
		if(typeof $("#jpgFile").html() != "undefined" && form.jpgFile.value != "") {
			alert("기존 악보 파일을 삭제 후 등록해 주세요.");
			return false;
		}
		
		if(typeof $("#mp3File").html() != "undefined" && form.mp3File.value != "") {
			alert("기존 음원 파일을 삭제 후 등록해 주세요.");
			return false;
		}
		
		if($("#itemId").val() == "") {
			form.action = "/admin/insertItemInfo.do";
		} else {
			form.action = "/admin/updatetItemInfo.do";	
		}
		
		form.submit();
		
	}
	
}

function fncList() {
	window.location.href = "/admin/itemList.do?areaCd="+$("#areaCd").val();
}


function fncDelFile(id) {
	$("#"+id).remove();
}


function fncChangeArea1() {
	$("#areaCd").val($("#region1 option:selected").val());
	$("#areaNm").val($("#region1 option:selected").text());
	fncChangeArea("region2", $("#areaCd").val());
	$("#region3").html("<option value=''>선택</option>");
}

function fncChangeArea2() {
	$("#areaCd").val($("#region2 option:selected").val());
	$("#areaNm").val($("#areaNm").val() + " " + $("#region2 option:selected").text());
	fncChangeArea("region3", $("#areaCd").val());
}

function fncChangeArea3() {
	$("#areaCd").val($("#region3 option:selected").val());
	$("#areaNm").val($("#areaNm").val() + " " + $("#region3 option:selected").text());
}

function fncChangeArea(cNm, areaCd) {
	$.getJSON('/item/changeArea.do?areaCd='+areaCd, function(data) {
		var resultList = data.regionList;
		var itemListHtml = "";
		itemListHtml += "<option value=''>선택</option>";
		if(resultList.length > 0){
			for(var i = 0; i < resultList.length; i++) {
				var region = resultList[i];
				itemListHtml += "<option value=\""+region.codeId+"\">"+region.codeName+"</option>";
			}
		}
		$("#"+cNm).html(itemListHtml);
	});
}

//삭제
function fncDelete(itemId){
	
	$.post("/admin/deletetItemInfo.do", $("#itemId").serialize(),
	        function(data){
	        	if (data.success == "true"){
	        		alert('게시물을 삭제하였습니다.');
	        		fncList();
	        	}else{
	        		alert(data.message);
	        	}
	        }, "json"
	    );
}
</script>
</head>
<body>
<form id="searchVO" name="searchVO" action="/admin/itemList.do" method="get">
</form>
<div id="">
	<!-- Header -->
	<jsp:include page="../common/header.jsp"></jsp:include>
	<!--// Header -->
	<!-- Content -->
	<!-- 컨텐츠 -->
	<div id="container" class="bg_sub">
		<div style="border-top:0px solid #e5e6e6; background:#fff;">
			<!-- 내용영역 -->
			<div style="width:1024px; margin:0 auto; border-left:0px solid #dddddd; bottom;">
				<div >
					<div >
						<h3>자료 관리</h3>
					</div>
					<!-- 내용 -->
					<form:form commandName="itemVO" name="itemVO" method="post" enctype="multipart/form-data">
						<form:hidden path="itemId" />
						 <form:hidden path="areaCd"/>
					<div class="mr37 ">
						<!-- 리스트 목록 -->
						<div class="tb_sch_list">
									<table>
										<colgroup>
											<col width="20%" />
											<col width="60%" />
											<col width="20%" />
										</colgroup>
										<tbody>
											<tr>
												<th scope="row">제목</th>
												<td colspan="2"><form:input path="itemNm" title="제목" class="it419" placeholder="${titleMsg}" /></td>
											</tr>
											<tr>
												<th scope="row">다른 이름</th>
												<td colspan="2"><form:input path="otherNm" title="다른 이름" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">녹음 지역</th>
												<td colspan="2">
													<!-- 첫번째 -->
													<select class="bg_sel" style="width:80px;" id="region1" onchange="fncChangeArea1()">
														<option value="">선택</option>
														<c:forEach var="region" items="${regionList1}">
															<option value="${region.codeId }" ${region.codeId eq fn:substring(itemVO.areaCd,0,4) ? "selected='selected'" : ''}>${region.codeName }</option>	
														</c:forEach>
													</select>
													<!-- //첫번째 -->
													<!-- 두번째 -->
													<select style="width:80px;"  id="region2" onchange="fncChangeArea2()">
														<option value="">선택</option>
														<c:forEach var="region" items="${regionList2}">
															<option value="${region.codeId }" ${region.codeId eq fn:substring(itemVO.areaCd,0,7) ? "selected='selected'" : ''}>${region.codeName }</option>	
														</c:forEach>
													</select>
													<!-- //두번째 -->
													<!-- 세번째 -->
													<select style="width:80px;"  id="region3" onchange="fncChangeArea3()">
														<option value="">선택</option>
														<c:forEach var="region" items="${regionList3}">
															<option value="${region.codeId }" ${region.codeId eq itemVO.areaCd ? "selected='selected'" : ''}>${region.codeName }</option>	
														</c:forEach>
													</select>
													<!-- //세번째 -->
												</td>
											</tr>
											<tr>
												<th scope="row">지명</th>
												<td colspan="2"><form:input path="areaNm" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">지명 색인</th>
												<td colspan="2">
												<form:select path="areaIdxCd" class="it419">
													<form:options items="${idxList}" itemLabel="codeName" itemValue="codeId"/>
												</form:select>
												</td>
											</tr>
											<tr>
												<th scope="row">인명 색인</th>
												<td colspan="2">
													<form:select path="pplIdxCd" class="it419">
													<form:options items="${idxList}" itemLabel="codeName" itemValue="codeId"/>
												</form:select>
												</td>
											</tr>
											<tr>
												<th scope="row">작품명 색인</th>
												<td colspan="2">
													<form:select path="nameIdxCd" class="it419">
													<form:options items="${idxList}" itemLabel="codeName" itemValue="codeId"/>
												</form:select>
												</td>
											</tr>
											<tr>
												<th scope="row">녹음일자</th>
												<td colspan="2"><form:input path="recordDate" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">녹음테잎명</th>
												<td colspan="2"><form:input path="originTapeNm" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">가창자</th>
												<td colspan="2"><form:input path="singerNm" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">가창자 이력</th>
												<td colspan="2"><form:textarea rows="5" cols="115" path="singerCareerHstr" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">녹음자</th>
												<td colspan="2"><form:input path="recorderNm" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">채보자</th>
												<td colspan="2"><form:input path="extractorNm" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">가창방식</th>
												<td colspan="2"><form:input path="singingTypeCntn" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">받음구 예</th>
												<td colspan="2"><form:input path="pronunciationCntn" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">메김구 예</th>
												<td colspan="2"><form:input path="leadCntn" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">후렴 예</th>
												<td colspan="2"><form:input path="refrainCntn" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">본문 예</th>
												<td colspan="2"><form:input path="articleCntn" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">기타 사설</th>
												<td colspan="2"><form:input path="etcArticleCntn" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">출현음</th>
												<td colspan="2"><form:input path="adventNt" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">종지음</th>
												<td colspan="2"><form:input path="cadenceNt" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">요성음</th>
												<td colspan="2"><form:input path="flexuralNt" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">리듬구조</th>
												<td colspan="2"><form:textarea rows="5" cols="115" path="rhythmStrcCntn" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">빠르기</th>
												<td colspan="2"><form:input path="songSpeedCntn" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">기발행 음반</th>
												<td colspan="2"><form:input path="publishAlbumNm" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">참고 서적</th>
												<td colspan="2"><form:input path="referenceBookNm" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">곡 해설</th>
												<td colspan="2"><form:textarea rows="5" cols="115" path="songExplanationCntn" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">좌표 - 경도</th>
												<td colspan="2"><form:input path="longitude" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">좌표 - 위도</th>
												<td colspan="2"><form:input path="latitude" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">TM_X</th>
												<td colspan="2"><form:input path="tmX" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">TM_Y</th>
												<td colspan="2"><form:input path="tmY" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">유형 분류</th>
												<td colspan="2"><form:input path="itemTypeCntn" title="" class="it419"/></td>
											</tr>
											<tr>
												<th scope="row">악보파일</th>
												<td colspan="2">
													<c:forEach items="${itemVO.attachFileList}" varStatus="i">
														<c:if test="${itemVO.attachFileList[i.index].attachFileTypeCd eq '01' }" >
														<ul id="jpgFile">
														<li>
															${itemVO.attachFileList[i.index].attachFileOriginNm}  <input type="image" src="/img/uploadify-cancel.png" alt="파일 삭제" onclick="fncDelFile('jpgFile')"/>
															<form:hidden path="attachFileList[${i.index }].contentsId"/>
															<form:hidden path="attachFileList[${i.index }].attachFileSeq"/>
															<form:hidden path="attachFileList[${i.index }].attachFileTypeCd"/>
															<form:hidden path="attachFileList[${i.index }].attachFileNm"/>
															<form:hidden path="attachFileList[${i.index }].attachFileOriginNm"/>
															<form:hidden path="attachFileList[${i.index }].attachFilePath"/>
															<form:hidden path="attachFileList[${i.index }].attachFileDesc"/>
															</li>
															</ul>
														</c:if>
													</c:forEach>
													
													<input type="file" class="multi" name="jpgFile" class="it419" />
												</td>
											</tr>
											<tr>
												<th scope="row">음원파일</th>
												<td colspan="2">
													
													<c:forEach items="${itemVO.attachFileList}" varStatus="i">
														<c:if test="${itemVO.attachFileList[i.index].attachFileTypeCd eq '02' }" >
														<ul id="mp3File">
														<li>
															${itemVO.attachFileList[i.index].attachFileOriginNm}  <input type="image" src="/img/uploadify-cancel.png" alt="파일 삭제" onclick="fncDelFile('mp3File')"/>
															<form:hidden path="attachFileList[${i.index }].contentsId"/>
															<form:hidden path="attachFileList[${i.index }].attachFileSeq"/>
															<form:hidden path="attachFileList[${i.index }].attachFileTypeCd"/>
															<form:hidden path="attachFileList[${i.index }].attachFileNm"/>
															<form:hidden path="attachFileList[${i.index }].attachFileOriginNm"/>
															<form:hidden path="attachFileList[${i.index }].attachFilePath"/>
															<form:hidden path="attachFileList[${i.index }].attachFileDesc"/>
														</li>
														</ul>
														</c:if>
													</c:forEach>
													<input type="file" class="multi" name="mp3File" />
												</td>
											</tr>
										</tbody>
									</table>
								</div>
						<!-- //리스트 목록 -->
						<!-- 버튼 -->
						<div class="btn_area">
							<div class="t_center">
								<c:if test="${fn:length(itemVO.itemId) > 0}">
								<a href="javascript:fncDelete('${itemVO.itemId}')" class="btn_list_view"><span>삭제</span></a>
								</c:if>
								<a href="javascript:fncSave()" class="btn_list_view"><span>저장</span></a>
								<a href="javascript:fncList()" class="btn_list_view"><span>목록</span></a>
							</div>
						</div>
						<!-- //버튼 -->
					</div>
					</form:form>
					<!-- //내용 -->	
				</div>
			</div>
			<!-- //내용영역 -->
		</div>
	</div>
	<!-- //컨텐츠 -->
	<!--// Content -->

	<jsp:include page="../common/footer.jsp"></jsp:include>
</div>
</body>
<script type="text/javascript">
//<![CDATA[
(function ($) {
	$(document).ready(function() {
		$('.search').schSelect();
		//gnb 메뉴
		navigation("gnb_wrap", "slide");
		
		$( "#keyword" ).keypress(function( event ) {
			  if ( event.which == 13 ) {
				  searchWithinResults();
			  }
		});
		
		$( "#searchButton" ).click(function( event ) {
			searchWithinResults();
		});

	});
}(jQuery));
//]]>
</script>
</html>